<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <emp-list></emp-list>
        </div>
        <template id="show-comp">
           <table align="center" class="table table-hover" style="text-align: center;width: 70%;">
        <caption><h1 align="center">员工信息表</h1></caption>
        <tr class="info">
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        <tr v-for="item in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.address}}</td>
        </tr>  
        </table>
        
        </template>
   <script>
       new Vue({
            el:"#app",
            components: {
                 "emp-list":{
                data:function(){
                    return{
                        list:[{
                            id:1,
                            name:"王五",
                            age:22,
                            address:"燕子坞S"
                        },
                        {
                            id:2,
                            name:"赵六",
                            age:32,
                            address:"北京"
                        },
                        {
                            id:3,
                            name:"赵请",
                            age:12,
                            address:"上海"
                        }]
                    }
                },
                    template:"#show-comp"
            }
            }
           
       })
   </script>
</body>
</html>